<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单绑定属性</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <form id="app">
      用户名：<input type="text" v-model.trim="username" placeholder="请输入账号"><br>
      密码：<input type="text" v-model.trim="password"><br>
      年龄：<input type="number" v-model.number="age" placeholder="请输入年龄"><br>
      性别：
        男：<input type="radio" v-model="sex" value="male" checked>
        女：<input type="radio" v-model="sex" value="female"><br>
      爱好：<input type="checkbox" v-model="like" value="smoking">抽烟
      <input type="checkbox" v-model="like" value="drinking">喝酒
      <input type="checkbox" v-model="like" value="hair">烫头<br>
      籍贯：
      <select v-model="address">
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="wuhan">武汉</option>
        <option value="chengdu">成都</option>
      </select><br>
      个人简介<textarea v-model.lazy="content"></textarea><br>
      是否勾选用户协议：
      <input type="checkbox" v-model="isAgree">我已阅读并同意用户协议
      <button @click.prevent="submit">提交</button>
    </form>
<!--
    收集表单数据:
      若:<input type="text"/>，则v-model收集的是value值，用户输入的就是value值,
      若:<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值
      若:<input type="checkbox"/>
        1.没有配置input的value属性，那么收集的就是checked(勾选or 未勾选，是布尔值)
        2.配置input的value属性:
            (1)v-model的初始值是非数组，那么收集的就是checked(勾选 or 未勾选，是布尔值)
            (2)v-mode1的初始值是数组，那么收集的的就是value组成的数组
        3.对于select下拉列表 v-model应该写在select上，并且给每个option上指定value值
      备注:v-model的三个修饰符:
        lazy:失去焦点再收集数据
        number:输入字符串转为有效的数字
        trim:输入首尾空格过滤
-->
</body>
  <script>
    Vue.config.productionTip = false;
    new Vue({
      el: '#app',
      data:{
        username:"",
        password:"",
        age:"",
        sex: "male",
        like: [],
        address:"wuhan",
        content:"",
        isAgree: false
      },
      methods:{
        submit(){
          // 检查是否同意用户协议
          if(this.isTrue){
            alert("请勾选用户协议");
            return;
          }
          // 提交表单数据
          console.log(this.username, this.password, this.age, this.sex, this.like, this.address, this.content);
          alert("提交成功！");
        }
      }
    })
  </script>
</html>